{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}尚硅谷书店-首页{% endblock title %}
{% block topfiles %}
<script>
$(function () {
    update_total_price()
    // 计算总价
    function update_total_price() {
        // 获取商品的价格和数量
        books_price = $('.show_pirze').children('em').text()
        books_count = $('.num_show').val()
        // 计算商品的总价
        books_price = parseFloat(books_price)
        books_count = parseInt(books_count)
        total_price = books_price * books_count
        // 设置商品总价
        $('.total').children('em').text(total_price.toFixed(2) + '元')
    }

    // 商品增加
    $('.add').click(function () {
        // 获取商品的数量
        books_count = $('.num_show').val()
        // 加1
        books_count = parseInt(books_count) + 1
        // 重新设置值
        $('.num_show').val(books_count)
        // 计算总价
        update_total_price()
    })

    // 商品减少
    $('.minus').click(function () {
        // 获取商品的数量
        books_count = $('.num_show').val()
        // 加1
        books_count = parseInt(books_count) - 1
        if (books_count == 0){
            books_count = 1
        }
        // 重新设置值
        $('.num_show').val(books_count)
        // 计算总价
        update_total_price()
    })

    // 手动输入
    $('.num_show').blur(function () {
        // 获取商品的数量
        books_count = $(this).val()
        // 数据校验
        if (isNaN(books_count) || books_count.trim().length == 0 || parseInt(books_count) <= 0 ){
            books_count = 1
        }
        // 重新设置值
        $('.num_show').val(parseInt(books_count))
        // 计算总价
        update_total_price()
    })
})
</script>
{% endblock topfiles %}
{% block body %}
	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>	
				<span></span>			
				<ul class="subnav">
					<li><a href="#" class="python">Python</a></li>
					<li><a href="#" class="javascript">Javascript</a></li>
					<li><a href="#" class="algorithms">数据结构与算法</a></li>
					<li><a href="#" class="machinelearning">机器学习</a></li>
					<li><a href="#" class="operatingsystem">操作系统</a></li>
					<li><a href="#" class="database">数据库</a></li>
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">移动端书城</a></li>
				<li class="interval">|</li>
				<li><a href="">秒杀</a></li>
			</ul>
		</div>
	</div>

	<div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">Python</a>
		<span>></span>
		<a href="#">商品详情</a>
	</div>

	<div class="book_detail_con clearfix">
		<div class="book_detail_pic fl"><img src="{% static books.image %}"></div>

		<div class="book_detail_list fr">
			<h3>{{ books.name }}</h3>
			<p>{{ books.desc }}</p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em>{{ books.price }}</em></span>
				<span class="show_unit">单  位：{{ books.unit }}</span>
			</div>
			<div class="book_num clearfix">
				<div class="num_name fl">数 量：</div>
				<div class="num_add fl">
					<input type="text" class="num_show fl" value="1">
					<a href="javascript:;" class="add fr">+</a>
					<a href="javascript:;" class="minus fr">-</a>	
				</div> 
			</div>
			<div class="total">总价：<em>100元</em></div>
			<div class="operate_btn">
                {% csrf_token %}
				<a href="javascript:;" class="buy_btn">立即购买</a>
				<a href="javascript:;" books_id="{{ books.id }}" class="add_cart" id="add_cart">加入购物车</a>
				<a href="#" class="button is-info" id="write-comment">我要写评论</a>
			</div>
			<div class="field has-addons" id="comment-input" data-bookid="{{ books.id }}" data-userid="{{ request.session.passport_id }}">
			  <div class="control">
			    <input class="input" type="text" placeholder="评论内容">
			  </div>
			  <div class="control" id="submit-comment">
			    <a class="button is-info">
			      提交评论
			    </a>
			  </div>
			</div>
		</div>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_book">
				<h3>新品推荐</h3>
				<ul>
                    {% for book in books_li %}
					<li>
						<a href="{% url 'books:detail' books_id=books.id %}"><img src="{% static book.image %}"></a>
						<h4><a href="{% url 'books:detail' books_id=books.id %}">{{ book.name }}</a></h4>
						<div class="prize">￥{{ book.price }}</div>
					</li>
					{% endfor %}
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active" id="detail">商品介绍</li>
				<li id="comment">评论</li>
			</ul>

			<div class="tab_content">
				<dl id="book_detail">
					<dt>商品详情：</dt>
					<dd>{{ books.detail | safe }}</dd>
				</dl>
				<dl id="book_comment">
				</dl>
			</div>

		</div>
	</div>
	<div class="add_jump"></div>
{% endblock body %}
{% block bottomfiles %}
<script type="text/javascript">
	var $add_x = $('#add_cart').offset().top;
	var $add_y = $('#add_cart').offset().left;

	var $to_x = $('#show_count').offset().top;
	var $to_y = $('#show_count').offset().left;

	$('#comment-input').hide()

	$('#add_cart').click(function(){
        // 获取商品的id和商品数量
        books_id = $(this).attr('books_id')
        books_count = $('.num_show').val()
        csrf = $('input[name="csrfmiddlewaretoken"]').val()
        // 发起请求，访问/cart/add/, 进行购物车数据的添加
        params = {
        	'books_id': books_id, 
        	'books_count': books_count,
            'csrfmiddlewaretoken': csrf
        }

        $.post('/cart/add/', params, function (data) {
            if (data.res == 5){
                // 添加成功
                $(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
                $(".add_jump").stop().animate({
                    'left': $to_y+7,
                    'top': $to_x+7},
                    "fast", function() {
                        $(".add_jump").fadeOut('fast',function(){
                            // 获取原有show_count的值
                            count = $('#show_count').html()
                            count = parseInt(count) + parseInt(books_count)
                            $('#show_count').html(count);
                        });
                });
            }
            else {
                // 添加失败
                alert(data.errmsg)
            }
        })
	})

	// 获取评论
	$.ajax({
		url: '/comment/comment/' + $('#comment-input').data('bookid'),
		success: function (res) {
			if (res.code === 200) {
				var data = res.data;
				console.log(data);
				var div_head = '<div>';
				var div_tail = '</div>';
				var dom_element = ''
				for(i = 0; i < data.length; i++) {
					var head = '<div>';
					var tail = '</div>';
					var temp = head + '<span>' + data[i].user_id + '</span>' + '<br>' + '<span>' + data[i].content + '</span>';
					dom_element += temp;
				}
				dom_element = div_head + dom_element + div_tail;
				$('#book_comment').append(dom_element);
			}
		}
	})

	$('#detail').click(function () {
		$(this).addClass('active');
		$('#comment').removeClass('active');
		$('#book_comment').hide();
		$('#book_detail').show();
	})
	$('#comment').click(function () {
		$(this).addClass('active');
		$('#detail').removeClass('active');
		$('#book_comment').show();
		$('#book_detail').hide();
	})
	$('#write-comment').click(function () {
		$('#comment-input').show();
	})
	$('#submit-comment').click(function () {
		var book_id = $('#comment-input').data('bookid');
		var user_id = $('#comment-input').data('userid');
		var content = $('#comment-input .input').val();
		var data = {
			book_id: book_id,
			user_id: user_id,
			content: content,
		}
		console.log('content: ', content);
		$.ajax({
			type: 'POST',
			url: '/comment/comment/' + book_id + '/',
			data: JSON.stringify(data),
			success: function (res) {
				if (res.code === 200) {
					// console.log('res: ', res)
					$('#comment-input').hide();
				}
			}
		})
	})
</script>
{% endblock bottomfiles %}